<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>忘记密码</title>
<link rel="stylesheet" th:href="@{/lay/layui/css/layui.css}" />
<script th:src="@{/moon/js/jquery.js}"></script>
<script th:src="@{/moon/js/vue.js}"></script>
<script th:src="@{/lay/layui/layui.js}"></script>
<script th:src="@{/lay/layui/sliderVerify.js}"></script>


<style>
	div{
		/* border:1px solid red; */
		padding:0px;
		margin:0px;
	}
	body{
		background-color:#009688;'
	}
</style>

</head>
<body>
		<div class="layui-fluid"
			style="width:500px;background-color:white;margin-top:50px;padding-bottom:20px">
			<form class="layui-form layui-form-pane" lay-filter="loginform"
				action="" method="post">
				<div
					style="height: 80px; line-height: 80px; font-size: 23px; color: #009688; width: 95%; text-align:center">
					<b>忘记密码</b>
				</div> 

				<div class="layui-form-item">
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-inline">
						<input id="nameinput" type="text" name="name" 
							placeholder="请输入用户名" autocomplete="off" class="layui-input">
					</div>
				</div>
				<!-- 默认隐藏 -->
				<div class="layui-form-item" id="phone">
					<label class="layui-form-label">手机号</label>
					<div class="layui-input-inline">
						<!-- 加入属性required lay-verify="required" -->
						<input id="phoneinput" name="phone" type="text"
							placeholder="请输入手机号" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline"
						style="text-align: left; width: 110px">
						<button type="button" id="checknumbtn" class="layui-btn"
							style="width: 100%" >获取验证码</button>		
					</div>
				</div>
				<div class="layui-form-item" id="checknum">
					<label class="layui-form-label">验证码</label>
					<div class="layui-input-inline">
						<input id="checknuminput" name="checknumname" type="text"
							placeholder="请输入验证码" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-inline" style="width: 100%">
						<button id="nextMoveBtn" type="button" class="layui-btn"
							lay-filter="nextMoveBtn" style="width: 100%">点击验证用户名及手机号，进入下一步</button>
					</div>
				</div>
				
				<div id="forgetPassOne" class="layui-form-item" style="display:none">
					<label class="layui-form-label" style="width:40%">输入要设置的新密码</label>
					<div class="layui-input-inline" style="width:55%">
						<input id="newPassOne" type="password" name="password" 
							placeholder="请输入新密码" autocomplete="off"
							class="layui-input">
					</div>
				</div>
				<div id="forgetPassTwo" class="layui-form-item" style="display:none">
					<label class="layui-form-label" style="width:40%">确认要设置的新密码</label>
					<div class="layui-input-inline" style="width:55%">
						<input id="newPassTwo" type="password" name="password"
							 placeholder="两次输入须一致" autocomplete="off"
							class="layui-input">
					</div>
				</div>		
				<div id="forgetCompleteBtn" class="layui-form-item" style="display:none">
					<div class="layui-input-inline" style="width: 100%;">
						<button id="confirmBtn" type="button" class="layui-btn"
							lay-filter="confirmBtn" style="width: 100%">完成</button>
					</div>
				</div>
			</form>
		</div>
	<script>
	
		layui.use([ 'form', 'layer' ], function() {
		var form = layui.form;
		var layer = layui.layer;
		//验证码
				$('#checknumbtn').on('click', function() {
				var phoneNum=$("#phoneinput").val();
				if(phoneNum==null || phoneNum==""){
					layer.msg("请先填写手机号");
				}else{
					$.ajax({		
						type:"post",
						url:"/auction/Admin/sendchecknum",
						data:{phone:phoneNum},
						//dataType:"json",
						success:function(data){
							//layer.msg(data);
							var obj = eval("("+data+")");
							if(obj.data.error_code=="0"){
								layer.msg("验证码已发送，请注意查收");
								//禁用按钮，并且里面的文字变成"已发送(60s)"
								var second=30;
								$("#checknumbtn").attr("class","layui-btn layui-btn-disabled");
								$("#checknumbtn").attr("disabled","disabled");
								$("#checknumbtn").text("已发送("+second+"s)");
								
								//调用倒数计时器
								var interval=setInterval(function(){
									if(second>0){
										second--;
										$("#checknumbtn").text("已发送("+second+"s)");
									}else{
										//终止计时器
										clearInterval(interval);
										//循环执行完毕后，改回属性和文字内容
										$("#checknumbtn").attr("class","layui-btn");
										$("#checknumbtn").removeAttr("disabled");
					
										$("#checknumbtn").text("获取验证码");
									}
								},1000);

							//else:发送验证码失败	
							}else{
								layer.msg("网络繁忙，请稍后再试");
							}
							verifyCode=obj.checkNum;
							console.log(data);
							console.log(obj)
							//取出验证码和错误码
							console.log(obj.checkNum);
							console.log(obj.data.error_code);
							console.log("verifyCode:"+verifyCode);
						}
					});
				}
			});
		
			//点击下一步按钮
			$("#nextMoveBtn").click(function(){
				var name=$("#nameinput").val();
				var phone=$("#phoneinput").val();
				var checkCode=$("#checknuminput").val();
				//检查三项必填数据
				if(name==""){
					layer.msg("用户名不能为空");
				}else if(phone==""){
					layer.msg("手机号不能为空");
				}else if(checkCode==""){
					layer.msg("验证码不能为空");
				}else if(name!="" && phone!="" && checkCode!=""){
					//layer.msg("next");
					//将收到的数据发送给后台
					$.ajax({
						type:"POST",
						url:"/auction/Admin/forgetstepone",
						data:{name:name,phone:phone,checkCode:checkCode},
						success:function(data){
							console.log(data);
							if(data=="100"){
								layer.msg("验证码有误")
							}else if(data=="101"){
								layer.msg("您输入的信息有误")
							}else if(data=="1"){
								//锁定上面的几个输入框
								$("#nameinput").attr("disabled","disabled");
								$("#phoneinput").attr("disabled","disabled");
								$("#checknuminput").attr("disabled","disabled");
								//把下一步按钮变为不可用
								$("#nextMoveBtn").text("验证通过，请在下方设置新密码");
								$("#nextMoveBtn").attr("class","layui-btn layui-btn-disabled");
								
								layer.msg("验证通过，请在下方设置新密码");
								$("#forgetPassOne").css("display","");
								$("#forgetPassTwo").css("display","");
								$("#forgetCompleteBtn").css("display","");
							}else{
								layer.msg("网络繁忙，请稍后重试");
							}
						},
						error:function(data){
							layer.msg("失败"+data);
						}
					});	
				}	
			});//下一步按钮结束
			
			
			//点击完成按钮
			$("#confirmBtn").click(function(){
				//判断两个框是不是有内容
				var newPassOne=$("#newPassOne").val();
				var newPassTwo=$("#newPassTwo").val();
				if(newPassOne=="" || newPassTwo==""){
					layer.msg("密码不能为空");
					
				}else if(newPassTwo!=newPassOne){
					layer.msg("两次密码不一致");
					
				}else if(newPassOne==newPassTwo && newPassOne!="" && newPassTwo!=""){
					//将用户名，密码，手机号传到后台，修改密码
					var name=$("#nameinput").val();
					var phone=$("#phoneinput").val();
					$.ajax({
						type:"post",
						url:"/auction/Admin/forgetsteptwo",
						data:{newPassOne:newPassOne,newPassTwo:newPassTwo,name:name,phone:phone},
						success:function(data){
							console.log(data);
							if(data=="1"){
								$("#confirmBtn").attr("class","layui-btn layui-btn-disabled");
								layer.msg("修改成功，请重新登录");
								window.location.href = "/iframe";
							}else if(data="100"){
								layer.msg("输入的两次密码不一致");
								
							}else if(data="101"){
								layer.msg("修改密码失败，请稍后重试");
							}else{
								layer.msg("网络繁忙，请稍后再试");
							}
						},
						error:function(data){
							console.log(data);
							layer.msg("网络繁忙，请稍后再试");	
						},	
					});//ajax结束
				}else{
					layer.msg("网络繁忙，请稍后再试");	
				}
			});//确认按钮结束
		});		//layui最外层

		function autoClose(){
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		}	

	</script>

</body>
</html>